<template>
	<view class="ff-cell" @click="$emit('click')" :style="{'padding': $ff.props.padding, 'border-bottom': '1px solid ' + $ff.props.borderColor}">
		<slot name="box">
			<view class="ff-cell-box">
				<view class="ff-cell-icon">
					<slot name="icon"></slot>
				</view>
				<view class="ff-cell-left">
					<slot name="left">
						<view class="ff-cell-title">
							<slot name="title">{{$ff.props.title}}</slot>
						</view>
						<view class="ff-cell-label">
							<slot name="label">{{$ff.props.label}}</slot>
						</view>
					</slot>
				</view>
				<view class="ff-cell-center">
					<slot name="center">{{$ff.props.center}}</slot>
				</view>
				<view class="ff-cell-value">
					<slot name="default">{{$ff.props.value}}</slot>
				</view>
				<view class="ff-cell-link" v-if="$ff.props.isLink">
					<ff-icon v-bind="$ff.props.linkIcon"></ff-icon>
				</view>
			</view>
		</slot>
	</view>
</template>

<script>
	export default {
		name: "ff-cell",
		components: {},
		props: {
			title: {
				type: String,
				default: undefined
			},
			label: {
				type: String,
				default: undefined
			},
			value: {
				type: String,
				default: undefined
			},
			center: {
				type: String,
				default: undefined
			},
			icon: {
				type: String,
				default: undefined
			},
			border: {
				type: Boolean,
				default: undefined
			},
			borderColor: {
				type: String,
				default: undefined
			},
			isLink: {
				type: Boolean,
				default: undefined
			},
			padding: {
				type: String,
				default: undefined
			},
			linkIcon: {
				type: Object,
				default: undefined
			},
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";
	
	.ff-cell:first-child {
		border-top: 0px !important;
	}
	
	.ff-cell:last-child {
		border-bottom: 0px !important;
	}

	.ff-cell-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		align-content: center;
	}

	.ff-cell {
		width: inherit;
	}
	
	.ff-cell-value {
		color: #606266;
	}

	.ff-cell-left {}
	
	.ff-cell-title {
		font-size: 16px;
		padding-bottom: 3px;
	}
	
	.ff-cell-label {
		font-size: 14px;
		color: #909193;
	}

	.ff-cell-center {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
	}
	
	.ff-cell-link {
		
	}
</style>